@charset "utf-8";
//共同部分样式文件

header{
    width: 100%;
    background: #000000;
    //////////////////头部上部分
    .header_top{
        .logo{
            width: 282px;
            margin: 40px 42px;
            img{
                width: 100%;
            }
        }
        .header_top_right{
            text-align: right;
            .message_box{
                position: relative;
                margin-top: 14px;
                margin-right: 50px;
                a{
                    position: relative;
                    color: #0dafd2;
                    font-size: 12px;
                    line-height: 26px;
                    &::after{
                        content: "";
                        display: block;
                        width: 1px;
                        height: 80%;
                        background: #868585;
                        position: absolute;
                        right: -16px;
                        bottom: 0;
                    }
                    &:hover{
                        color: #FFFFFF;
                    }
                }
                span{
                    color: #868585;
                    margin-left: 25px;
                    &:hover{
                        cursor: pointer;
                        color: #0dafd2;
                    }
                }
                span:first-of-type{
                    margin-left: 30px;
                }
                .reminder_box{
                    position: absolute;
                    width: 100px;
                    height: 186px;
                    right: 94px;
                    top: 22px;
                    background: #868686;
                    border-radius: 0 0 10px 10px;
                    text-align: center;
                    transform: scale(0);
                    z-index: 999;
                }
                .xiaoxi_box{
                    position: absolute;
                    width: 100px;
                    height: 186px;
                    right: 54px;
                    top: 22px;
                    background: #868686;
                    border-radius: 0 0 10px 10px;
                    text-align: center;
                    transform: scale(0);
                    z-index: 999;
                }
                .message_reminder:hover~.reminder_box{

                    transform-origin: top;
                    transition-duration: .5s;
                    transform: scale(1);
                }
                .icon-xiaoxi:hover~.xiaoxi_box{
                    transform-origin: top;
                    transition-duration: .5s;
                    transform: scale(1);
                }
              
            }
            nav{
                ul{
                    margin: 10px 32px 0 0;
                    li{
                        margin: 0 18px;
                        position: relative;
                        a{
                            color: #fff;
                            font-size: 24px;
                            &:hover{
                                color: #0dafd2;
                            }
                        }
                        &::after{
                            content: "";
                            display: block;
                            position: absolute;                            
                            width: 1px;
                            height: 80%;
                            background: #FFFFFF;
                            right: -18px;
                            bottom: 0;
                        }
                    }
                    li:last-of-type::after{
                        content: "";
                        display: none;
                    }
                }
            }
        }
    }
    
    ///////////////头部下部分
    .header_bottom{
        font-size: 0;
        &>div{
            display: inline-block;
        }
        .person_message{
            width: 388px;
            font-size: 14px;
            color: #9a9999;
            background: #0086B3;
            vertical-align: middle;
            background: #ffffff;
            .person_message_top{
                width: 100%;
                padding-top: 22px;
                &>div{
                    display: inline-block;
                }
                .img_box{
                    width: 112px;
                    margin-left: 32px;
                    vertical-align: middle;
                    img{
                        width: 100%;
                    }
                }
                .person_main_message{
                    vertical-align: middle;
                    text-align: left;
                    margin-left: 28px;
                    color: #acabab;
                    .username{
                        font-size: 24px;
                        font-weight: bold;
                        color: #000000;
                        .sex{
                            font-size: 12px;
                            color: #0dafd2;
                            padding-left: 4px;
                        }
                    }
                    .country{
                        position: relative;
                        margin-right: 12px;
                    }
                    .country::after{
                        content: "";
                        display: block;
                        width: 2px;
                        height: 80%;
                        background: #acabab;
                        position: absolute;
                        right: -8px;
                        bottom: 2px;
                    }
                    p{
                        line-height: 21px;
                    }
                    &>div{
                        font-size: 12px;
                        color: #0dafd2;
                        img{
                            width: 12px;
                            vertical-align: middle;
                        }
                    }
                }
            }
            .person_message_bottom{
                padding: 20px 0 0 40px;
                &>div{
                    display: inline-block;
                    text-align: center;
                    margin-right: 28px;
                    padding-bottom: 18px;
                    p:first-of-type{
                        font-size: 12px;
                        }
                    p:last-of-type{
                        font-size: 18px;
                        color: #000000;
                        font-weight: bold;
                    }
                }
                .qq_blog{
                    vertical-align: middle;
                    &>span:hover{
                        color: #0dafd2;
                        cursor: pointer;
                    }
                }
                span{
                    display: inline-block;
                    font-size: 22px;
                    margin-right: 10px;
                }
            }
        }
        .header_bottom_pic{
            width: 676px;
            vertical-align: middle;
            img{
                width: 100%;
            }
        }
    }
}
//、、、、、、、、、、、、、、主体
main{
//  height: 200px;
    background: #000000;
}

//、、、、、、、、、、、、、尾部、、、、、、、、、、、、、
footer{
    width: 100%;
    background: #000000;
    .link{
        width: 972px;
        border-top: 1px solid #282828;
        margin: 0 auto;
        a{
            position: relative;
            color: #898989;
            font-size: 10px;
            line-height: 36px;
            margin-right: 12px;
            &:hover{
                color: #0dafd2;
            }
            &::after{
                content: "";
                display: block;
                position: absolute;
                width: 1px;
                height: 76%;
                background: #FFFFFF;
                right: -10px;
                bottom: 1px;
            }
            &:last-child::after{
                content: "";
                display: none;
            }
        }
    }
    
    .footer_middle{
        width: 972px;
        margin: 0 auto;
        padding:14px 0;
        border-top: 1px solid #929292;
        border-bottom: 1px solid #929292;
        .footer_middle_left{
            margin-left: 74px;
            a{
                position: relative;
                color: #0ca7c9;
                font-size: 12px;
                line-height: 24px;
                margin-right: 16px;
                border-right: 1px solid grey;
                padding-right: 26px;
               &:first-of-type{
                   margin: 0;
                   padding: 0;
                   border: 0;
               } 
               &:last-of-type{
                   border: 0;
               }
               &::after{
                   content: "";
                   display: block;
                   position: absolute;
                   border-top: 6px solid transparent;
                   border-right: 6px solid transparent;
                   border-bottom: 6px solid transparent;
                   border-left: 6px solid #0ca7c9;
                   bottom: 2px;
                   right: 0px;
               }
               &:first-of-type::after{
                   display: none;
               }
               &:hover{
                   color: #FFFFFF;
               }
            }
            div{
                display: inline-block;
                vertical-align: middle;
                margin: 0 13px;
            }
        }
    }
    .footer_middle{
      
        .footer_middle_right{
            margin-right: 70px;
            a{
                position: relative;
                color: #a5a5a5;
                font-size: 12px;
                padding: 0 14px;
                margin-right: 8px;
                &::after{
                   content: "";
                   display: block;
                   position: absolute;
                   border-top: 6px solid #0ca7c9;
                   border-right: 6px solid transparent;
                   border-bottom: 6px solid transparent;
                   border-left: 6px solid transparent;
                   top: 6px;
                   right: -4px;
                }
                &:hover{
                   color: #0dafd2;
               }
            }
            span{
                vertical-align: middle;
            }
            span:first-of-type{
                color: #a5a5a5;
                background: none;
            }
            .icon-diqiu:hover{
                color: #0dafd2;
            }
            .facebook_tumblr{
                margin: 0;
                padding: 0;
                &::after{
                    display: none;
                    margin: 0;
                    padding: 0;
                }
                span{
                color: #4c4c4c;
                background: #cbcbcb;
                }
            }
        }
    }
    .footer_bottom{
        div{
            display: table-cell;
            color: #8f8f8f;
            vertical-align: middle;
            font-size: 12px;
            line-height: 14px;
        }
        .footer_img{
            width: 250px;
            text-align: center;
        }
        .footer_bottom_mid{
            width: 486px;
        }
        .footer_bottom_right{
            padding-left: 24px;
            width: 240px;
            span{
                font-size: 14px;
                line-height: 32px;
            }
            a{
                position: relative;
                color: #8f8f8f;
                padding-left: 6px;
                &:hover{
                    color: #0dafd2;
                }
                &::after{
                    content: "";
                    display: block;
                    position: absolute;
                    width: 1px;
                    height: 76%;
                    background: #8f8f8f;
                    bottom: 2px;
                    left: 2px;
                }
            }
        }
    }
}
